<script setup lang="ts">
//PC端展示表格数据

import Icon from "@/components/icon/Icon.vue";
import Tip from "@/components/block/Tip.vue";
import StateIcon from "@/components/icon/stateIcon.vue";
import { DataType } from "@/store/interface";
import SaveData from "@/store/recordData";
defineProps<{
  data: DataType[];
}>();
</script>
<template>
  <table class="w-full dark:text-darkTwoTitle text-TwoTitle">
    <thead>
      <tr>
        <th class="whitespace-nowrap font-bold">
          {{ data[0].num ? "次数" : "序号" }}
        </th>
        <th class="whitespace-nowrap font-bold">图标</th>
        <th class="whitespace-nowrap font-bold">名称</th>
        <th class="whitespace-nowrap font-bold">网址</th>
      </tr>
    </thead>
    <tbody class="text-center">
      <tr
        v-for="(item, index) in data"
        :key="index"
       class="group transition hover:-translate-y-px hover:shadow-[0_0_26px_0_rgb(0,61,131,10%)]"
      >
        <th
          class="md:w-1/12 w-2/12 dark:group-even:bg-darkBgTable group-even:bg-BgTable rounded-l-lg"
          scope="row"
        >
          {{ item.num ? item.num : index + 1 }}
        </th>
        <td
          class="md:w-3/12 w-4/12 md:p-4 dark:group-even:bg-darkBgTable group-even:bg-BgTable"
        >
          <Icon :data="item" class="max-w-20 md:max-w-32 max-h-12" />
        </td>
        <td
          class="md:w-6/12 w-4/12 md:p-4 dark:group-even:bg-darkBgTable group-even:bg-BgTable"
        >
          {{ item.name }}
          <!-- 描述-->
          <div class="text-xs text-ThreeTitle dark:text-darkThreeTitle">
            {{ item.msg }}
            <Tip v-if="item.describe" :content="item.describe"></Tip>
          </div>
        </td>

        <td
          class="w-2/12 md:p-4 dark:group-even:bg-darkBgTable group-even:bg-BgTable rounded-r-lg"
        >
          <a
            class="relative inline-block px-3 py-1 font-semibold leading-tight apply-button rounded-lg lg:px-4 md:py-2 bg-BgButton dark:bg-darkBgButton opacity-75 hover:opacity-100"
            :href="item.download"
            target="_blank"
            :aria-label="'跳转至' + item.name"
          >
            <button
              class="relative text-md dark:text-darkColorButton text-ColorButton"
              :title="'跳转至' + item.name"
              @click="SaveData(item)"
            >
              {{ item.text || "前往" }}
              <span
                class="absolute w-5 h-5 text-xs bg-green-500 rounded-full right-[-1.4rem] bottom-5"
                v-if="item.state"
              >
                <StateIcon :dataState="item.state" />
              </span>
            </button>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style scoped></style>
